<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello</title>




  <script>
    // 检测开发者工具是否打开
    function detectDevTools() {
      const devToolsOpen = window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200;
      if (devToolsOpen) {
        // 开发者工具被打开


        // 页面上啥都不要显示，只显示白屏，只显示红色背景，啥都不显示，样式全不显示
        // 改变页面标题
        document.body.innerHTML = '';
        // 改变页面标题
        document.title = '开发者工具已打开';
        // 改变页面背景色
        document.body.style.backgroundColor = 'red';
        // 如果开发者工具被打开，触发调试器（进入调试模式）
        debugger; // 触发浏览器调试器
        alert('开发者工具已打开，触发了调试器！');
      }
    }

    // 每100毫秒检查一次
    setInterval(detectDevTools, 100);
  </script>
</head>

<body>
  <h1>请打开开发者工具，看看会发生什么！</h1>
  <p>此页面会检测开发者工具的打开状态，并触发调试器。</p>
</body>

</html>